<template>
  <div class="login-box">
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
      <!-- 背景圆 -->
      <div class="circle" style="--x: 0"></div>
      <div class="circle" style="--x: 1"></div>
      <div class="circle" style="--x: 2"></div>
      <div class="circle" style="--x: 3"></div>
      <div class="circle" style="--x: 4"></div>
      <!-- 登录框 -->
      <div class="container">
        <div class="form">
          <div class="title">红色物业智慧云平台</div>
          <form>
            <div class="inputBox">
              <input type="text" placeholder="请输入手机号/用户名" v-model="loginForm.username" @keyup.enter="handleLogin"/>
            </div>
            <div class="inputBox">
              <input type="password" placeholder="请输入密码" v-model="loginForm.password" @keyup.enter="handleLogin"/>
            </div>
            <div class="inputBox codeBox">
                <input type="text" placeholder="验证码" v-model="loginForm.verification" @keyup.enter="handleLogin"/>
                <img :src="code" alt="" @click="changeCode">
            </div> 
            <div class="inputBox" style="margin-top:45px;">
              <div @click="handleLogin">登录</div>
            </div>
            <div class="forget">
              <el-button type="text" @click="handleForgetPwd">忘记密码</el-button>
            </div>            
          </form>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Loading } from 'element-ui';
export default {
  name: "Login",
  data() {
    return {
      code:'',
      cookiePassword: "",
      loginForm: {
        username: "",
        password: "",
        verification:''
      },
      loading: false,
      time:new Date().getTime(),
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },

  created() {
    //  // 按下回车执行登录按钮点击事件
    //  window.addEventListener('keydown',this.keyDown)
     this.getCode();
    //  alert(window.screen.width)
    //  alert(window.screen.height)
  },
  methods: {
    // keyDown(e){
    //   if(e.keyCode == 13){
    //     this.handleLogin();
    //    }
    // },
    getCode(){
      if(process.env.NODE_ENV == 'development'){
        this.code = `http://192.168.110.171:10001/api/imgs?uuid=${new Date().getTime()}`
      }
      else if(process.env.NODE_ENV == 'production'){
        this.code = `http://web.sanfengcun.com/api/imgs?uuid=${new Date().getTime()}`
      }
    },
    changeCode(){
      this.getCode();
    },
    handleForgetPwd(){
      this.$router.push('/forgetPwd');
    },
    handleLogin() {
      if(!this.loginForm.username){
        this.$message.error("手机号不能为空");
      }
      else if(!this.loginForm.password){
        this.$message.error("密码不能为空");
      }
      else if(!this.loginForm.verification){
        this.$message.error("验证码不能为空");
      }
      else{
      this.loading = Loading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(0, 0, 0, 0.7)'
      })
     
        let params = {
          time:this.time,
          userName:this.loginForm.username,
          pwd:this.loginForm.password,
          uuid:this.code.split('?uuid=')[1],
          verification:this.loginForm.verification
        }
        let result = this.$md5.transferValue(params)
         this.axios.post(this.stateUrl.login,{
           time:this.time,
           userName:this.loginForm.username,
           pwd:this.loginForm.password,
           uuid:this.code.split('?uuid=')[1],
           verification:this.loginForm.verification,
           sign:this.$md5.val(result)
         }).then(res=>{
           this.loading.close();
           localStorage.setItem("tsToken", res.data.data.token);
           localStorage.setItem('userInfo',JSON.stringify({
              tel:res.data.data.tel,
              userName:res.data.data.userName
           }))
           setTimeout(()=>{
             this.$router.push('/home')
           },500)
         }).catch(()=>{this.loading.close();})
      } 
    },
  },
  destroyed(){
    window.removeEventListener('keydown',this.keyDown,false);
  }
};
</script>

<style lang="less" scoped>
.login-box {
  /* 相对定位 */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
}
/* 背景颜色 */
.login-box .color {
  /* 绝对定位 */
  position: absolute;
  /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
  filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

.login-box .color:nth-child(1) {
  top: -350px;
  width: 600px;
  height: 600px;
  background: #abcdef;
}

.login-box .color:nth-child(2) {
  bottom: -150px;
  left: 100px;
  width: 500px;
  height: 500px;
  background: #fffd87;
}

.login-box .color:nth-child(3) {
  bottom: 50px;
  right: 100px;
  width: 500px;
  height: 500px;
  background: #069bbd;
}

.box {
  position: relative;
}

/* 背景圆样式 */

.box .circle {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转 
    calc() 函数用于动态计算长度值 
    var() 函数调用自定义的CSS属性值x*/
  filter: hue-rotate(calc(var(--x) * 70deg));
  /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
  animation: animate 10s linear infinite;
  /* 动态计算动画延迟几秒播放 */
  animation-delay: calc(var(--x) * -1s);
}

/* 背景圆动画 */

@keyframes animate {
  0%,
  100% {
    transform: translateY(-50px);
  }

  50% {
    transform: translateY(50px);
  }
}

.box .circle:nth-child(1) {
  top: -50px;
  right: -60px;
  width: 100px;
  height: 100px;
}

.box .circle:nth-child(2) {
  top: 150px;
  left: -100px;
  width: 120px;
  height: 120px;
  z-index: 2;
}

.box .circle:nth-child(3) {
  bottom: 50px;
  right: -60px;
  width: 80px;
  height: 80px;
  z-index: 2;
}

.box .circle:nth-child(4) {
  bottom: -80px;
  left: 100px;
  width: 60px;
  height: 60px;
}

.box .circle:nth-child(5) {
  top: -80px;
  left: 140px;
  width: 60px;
  height: 60px;
}

/* 登录框样式 */
.container {
  position: relative;
  width: 430px;
  min-height: 360px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.form {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px;
}

/* 登录标题样式 */

.form .title {
  position: relative;
  color: #fff;
  font-size: 22px;
  letter-spacing:3px;
  margin:15px 0 30px 0;
  text-align: center;
}

/* 登录标题的下划线样式 */

.form .inputBox {
  width: 100%;
  margin-top: 35px;
  text-align: center;
}
.form .inputBox input{
  width:330px;
}

/* 输入框样式 */

.form .inputBox input,.form .inputBox div {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
  color: #fff;
}
.form .codeBox{
  display: flex;
  align-items: center;
}
.form .codeBox input{
  margin-right:10px;
  width:215px;
}
.form .codeBox img{
  cursor: pointer;
}
/* 登录按钮样式 */

.form .inputBox div{
  width: 90%;
  background: #3170fd;
  color: #fff;
  cursor: pointer;
  margin:0 auto;
}
.forget{
  margin-top:15px;
  text-align: center;
}
</style>
